<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝top导航</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.tab{
			width: 1200px;
			height: 40px;
			margin:0 auto;
		}
		.tab .left{
			width: 253px;
			height: 40px;
			background-color: yellow;
			float:left;
		}
		.tab .right{
			width: 502px;
			height: 40px;
			background-color: yellow;
			float:right;
			position:relative;
		}
		.tab .left ul li{
			list-style:none;
			line-height: 40px;
			text-align: center;
			float:left;
			margin-right:10px;
			position:relative;
		}
		.tab .left ul li .show{
			display: block;
		}
		.tab .left ul div{
			width: 300px;
			height: 100px;
			background-color: blue;
			position:absolute;
			display:none;
		}
		.tab li span:hover{
			color:red;
		}
		.tab .right ul li{
			list-style:none;
			line-height: 40px;
			text-align: center;
			float:left;
			margin-right:10px;
			position:relative;
		}
		.tab .right ul li .show{
			display:block;
		}
		.tab .right ul div{
			background-color: purple;
			position:absolute;
			display:none;
		}
		.tab .right .last div{
			width: 1200px;
			height: 300px;
			background-color: blue;
			left:-699px;
			display:none;
		}
	</style>
</head>
<body>
	<div class="tab">
		<div class="left">
			<ul>
				<li class="nav">
					<span>中国大陆</span>
					<div class="box">中国大陆</div>
				</li>
				<li>
					<span>注册/登入</span>
					
				</li>
				<li>
					<span>手机逛淘宝</span>
					
				</li>
			</ul>
		</div>
		<div class="right">
			<ul>
				<li class="nav">
					<span>我的淘宝</span>
					<div class="box">中国大陆</div>
				</li>
				<li>
					<span>购物车</span>
				</li>
				<li class="nav">
					<span>收藏夹</span>
					<div class="box">中国大陆</div>
				</li>
				<li>
					<span>商品分类</span>
					
				</li>
				<li class="nav">
					<span>卖家中心</span>
					<div class="box">中国大陆</div>
				</li>
				<li class="nav">
					<span>联系客服</span>
					<div class="box">中国大陆</div>
				</li>
				<li class="nav last">
					<span>网站导航</span>
					<div class="box">中国大陆</div>
				</li>
			</ul>
		</div>
	</div>
	<script>
		var navLis=document.getElementsByClassName('nav');
		var boxs=document.getElementsByClassName('box');
		for(var n=0;n<navLis.length;n++){
			navLis[n].index=n;
			navLis[n].onmouseenter=function(){
				for(var j=0;j<boxs.length;j++){
					boxs[j].className="box"
				}
				boxs[this.index].className="box show";
			}
			navLis[n].onmouseleave=function(){
				for(var j=0;j<boxs.length;j++){
					boxs[j].className="box"
				}
			}
			boxs[n].onmouseenter=function(){
				this.className="box show"
			}
			boxs[n].onmouseleave=function(){
				this.className="box"
			}
		}
	</script>
</body>
</html>